@import 'variables';
@import 'mixin';

.div {
  div {
    box-sizing: border-box;
  }
}

.topSection {
  position: relative;
  padding-top: 138px;
  background-size: cover;
  background-repeat: no-repeat;

  .title-div {
    padding-bottom: 62px;

    .title {
      width: 1060px;
      font-weight: 600;
      text-align: center;
      letter-spacing: -0.1px;
      color: #FFFFFF;
      text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15);
      display: flex;
      flex-direction: row;
      justify-content: center;

      .t1,.t2{
        text-align: left;
        display: block;
        font-size: 40px;
        line-height: 40px;
      }
    }

    p {
      max-width: 1067px;
      margin: 0 auto;
      margin-top: 12px;
      letter-spacing: -0.04px;
      color: #ffffff;
      text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15);
      text-align: center;
      font-size: 16px;
      line-height: 24px;
    }
  }
}

.pc-topSection{
  display: block;
}

.m-topSection{
  display: none;
}

@media only screen and (max-width: $mobile-max-width) {
  .topSection {
    padding-top: 114px;
    
    .title-div {
      width: 100%;
      top: 100px;
      padding-bottom: 81px;

      .title {
        width: 100%;
        flex-direction: column;

        .t1,.t2{
          font-size: 32px;
        }
      }

      p {
        width: 100%;
        text-align: left;
      }
    }
  }

  .pc-topSection{
    display: none;
  }
  
  .m-topSection{
    display: block;
  }
}

.cityBox {
  width: 100%;
  padding-top: 91px;
  padding-bottom: 99px;
  display: flex;
  flex-direction: row;
  position: relative;

  .city-card {
    position: relative;

    .innerBox {
      position: relative;
      width: 232px;
      height: 300px;
      border-radius: 10px;
      background: #FFFFFF;
      box-shadow: 0px 8px 16px rgba(36, 46, 66, 0.05), 0px 4px 8px rgba(36, 46, 66, 0.06);
      z-index: 0;

      .text{
        position:absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 10;
        padding: 24px 19px 24px 24px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .title {
          display: block;
          font-weight: 600;
          font-size: 32px;
          line-height: 52px;
          color: #171C34;
          margin-bottom: 8px;
          z-index: 10;
        }
  
        .des {
          display: block;
          font-size: 16px;
          line-height: 32px;
          color: #171C34;
          margin-bottom: 24px;
          z-index: 10;
        }
  
        .joinUs {
          display: flex;
          width: 104px;
          height: 40px;
          align-items: center;
          justify-content: center;
          background: linear-gradient(180deg, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.1) 96.81%), #55BC8A;
          box-shadow: 0px 8px 16px rgba(33, 43, 61, 0.2), 0px 10px 50px rgba(34, 43, 62, 0.1);
          border-radius: 20px;
          color: #FFFFFF;
          font-weight: 600;
          font-size: 14px;
          line-height: 20px;
          z-index: 10;
        }
      }

      .s-bg{
        width: 293px;
        height: 300px;
        top: 0;
        left: 0;
        position: absolute;
        background-image: url(/images/user-group/list/station-bg.svg);
        background-size: cover;
        background-position: -18px 0px;
        background-repeat: no-repeat;
        z-index: 1;
      }
    }

    .bl-svg {
      position: absolute;
      width: 131px;
      height: 128px;
      bottom: -78px;
      left: -63px;
      z-index: -1;
    }
  }

  .tr-svg {
    position: absolute;
    width: 131px;
    height: 128px;
    top: 19px;
    right: -48px;
    z-index: -1;
  }

  .imageBox{
    overflow: hidden;

    .imageList {
      width: 1140px;
      margin-left: 20px;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      flex: 1;

      .normalPic {
          display: block;
          box-sizing: border-box;
          width: 212px;
          height: 300px;
          border-radius: 10px;
          // background: #C4C4C4;
          padding: 20px;
          overflow: hidden;
          position: relative;
          z-index: 0;
          transition: width .5s;
    
          img {
            position: absolute;
            border-radius: 10px;
            width: 444px;
            height: 300px;
            top: 0px;
            left: 0px;
            z-index: -1;
            transition: transform .5s;
          }
    
          .nameText {
            text-align: center;
            width: 60px;
            height: 24px;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.1) 96.81%), #242E42;
            box-shadow: 0px 8px 16px rgba(33, 43, 61, 0.2), 0px 10px 50px rgba(34, 43, 62, 0.1);
            border-radius: 18px;
            font-weight: 500;
            font-size: 12px;
            line-height: 24px;
            color: #ffffff;
          }
    
          .textBox {
            position: absolute;
            bottom: 0px;
            left: 0px;
            padding: 20px;
            padding-bottom: 16px;
            opacity: 0;
            background: linear-gradient(180deg, rgba(23, 28, 52, 0) 0%, rgba(23, 28, 52, 0.8) 100%);
            border-radius: 10px;
    
            .title {
              font-weight: 600;
              font-size: 16px;
              line-height: 24px;
              letter-spacing: -0.0444444px;
              color: #FFFFFF;
              margin-bottom: 8px;
            }
    
            .des {
              font-size: 14px;
              line-height: 20px;
              color: rgba(255, 255, 255, 0.8);
            }
          }
    
          &:nth-child(even) {
            margin: 0 20px;
          }

          &:last-child{
            margin-right: 0px;
          }

          &:hover {
            width: 444px;
            cursor: pointer;

            .textBox {
              opacity: 1;
              transition-delay: .6s;
            }

            .chengdu {
              left: 0px;
            }
          }
      }
    }
  }
}

@media only screen and (max-width: $mobile-max-width) {
  .cityBox{
    flex-direction: column;
    padding-top: 0px;
    padding-bottom: 0px;

    .city-card{
      width: 100%;
      margin-bottom: 20px;
      border-radius: 10px;

      .innerBox{
        width: 100%;
        height: 228px;
        margin-top: -49px;

        .text{
          .title{
            font-size: 24px;
            line-height: 32px;
          }
  
          .des{
            margin-bottom: 20px;
          }
        }

        .s-bg{
          width: 100%;
        height: 100%;
        }
      }

      .bl-svg{
        display: none;
      }
    }

    .tr-svg{
      display: none;
    }

    .imageBox{
      .imageList{
        width: 100%;
        flex-direction: column;
        margin-left: 0px;

        .normalPic{
          width: 100%;

          img{
            width: 100%;
            height: auto;
          }

          .textBox{
            opacity: 1;
          }

          &:nth-of-type(even){
            margin: 20px 0px;
          }

          @media screen and (max-width: 421px) {
            img{
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
}

.org-section {
  background-size: 100% 100%;
  background-repeat: no-repeat;

  .org {
    padding: 48px 0px;
    height: 500px;
    display: flex;
    flex-direction: row;
    justify-content: center;

    .left {
      width: 480px;

      .title {
        font-weight: 600;
        font-size: 32px;
        line-height: 52px;
        color: #171C34;
        text-shadow: 0px 4px 8px rgba(35, 45, 65, 0.1);
      }

      .orgIcon {
        width: 89px;
        height: 29px;
        margin-top: 8px;
        margin-bottom: 24px;
      }

      .des {
        font-size: 16px;
        line-height: 32px;
        color: #171C34;
      }
    }

    .right {
      width: 535px;
      height: 294px;
      margin-left: 81px;
      padding-top: 8px;
      background-repeat: no-repeat;
      position: relative;
      display: flex;
      align-items: center;
      flex-direction: column;

      .bg {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 535px;
        height: 294px;
        z-index: 0;
      }

      .sig {
        width: 256px;
        height: 48px;
        background: #060845;
        box-shadow: 0px 8px 16px rgba(36, 46, 66, 0.05), 0px 4px 8px rgba(36, 46, 66, 0.06);
        border-radius: 8px;
        font-weight: 600;
        font-size: 16px;
        line-height: 22px;
        color: #FFFFFF;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 56px;
        z-index: 5;
      }

      .sig-zh {
        width: 256px;
        height: 48px;
        background: #060845;
        box-shadow: 0px 8px 16px rgba(36, 46, 66, 0.05), 0px 4px 8px rgba(36, 46, 66, 0.06);
        border-radius: 8px;
        font-weight: 600;
        font-size: 16px;
        line-height: 22px;
        color: #FFFFFF;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 92px;
        z-index: 5;
      }

      .positionBox {
        width: 100%;
        height: 48px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        z-index: 5;

        .position {
          width: 120px;
          height: 48px;
          background: #55BC8A;
          box-shadow: 0px 8px 16px rgba(36, 46, 66, 0.05), 0px 4px 8px rgba(36, 46, 66, 0.06);
          border-radius: 8px;
          font-weight: 600;
          font-size: 16px;
          line-height: 22px;
          color: #FFFFFF;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }

      .m-bg{
        display: none;
      }
    }
  }
}

@media only screen and (max-width: $mobile-max-width) {
  .org-section{
    background: linear-gradient(354.89deg, #FFFFFF 31.76%, rgba(255, 255, 255, 0.0001) 91.95%) !important;

    .org{
      height: auto;
      padding-top: 64px;
      padding-bottom: 64px;
      flex-direction: column;

      .left{
        width: 100%;
        margin-bottom: 24px;

        .textBox{
          display: flex;
          align-items: center;
          margin-bottom: 16px;

          .title {
            font-size: 24px;
            line-height: 28px;
          }

          img{
            margin: 0px;
            margin-left: 12px;
          }
        }
      }

      .right{
        width: 100%;
        margin-left: 0px;

        .bg{
          display: none;
        }

        .m-bg{
          display: block;
          position: absolute;
          width: 257px;
          height: 256px;
          top: 8px;
          left: calc(50% - 128.5px);
        }

        .sig {
          width: 240px;
          height: 48px;
        }

        .sig-zh {
          width: 240px;
          height: 48px;
          margin-bottom: 84px;
        }

        .positionBox{
          justify-content: center;

          .position{
            width: 80px;
            height: 48px;

            &:nth-of-type(even){
              margin: 0 38px;
            }
          }
        }
      }
    }
  }
}

.applyNew {
  .apply {
    padding-top: 108px;
    padding-bottom: 80px;

    .text-head {
      display: flex;
      flex-direction: row;
      margin-bottom: 24.03px;
      justify-content: center;

      .left {
        width: 480px;
        position: relative;

        .title-en {
          font-weight: 500;
          font-size: 14px;
          line-height: 24px;
          text-transform: uppercase;
          color: #00A971;
        }

        .title {
          font-weight: 600;
          font-size: 32px;
          line-height: 52px;
          color: #171C34;
          margin-bottom: 24px;
        }

        .des {
          font-size: 16px;
          line-height: 32px;
          color: #171C34;
        }

        .svg {
          width: 197.97px;
          height: 175.32px;
          opacity: 0.8;
          position: absolute;
          top: -60px;
          left: -35px;
        }
      }

      .right {
        width: 503.19px;
        height: 365.97px;
        margin-left: 96px;
        background-image: url(/images/user-group/list/applyNew/apply.svg);
      }
    }

    .title {
      display: block;
      font-weight: 600;
      font-size: 20px;
      line-height: 32px;
      color: #36435C;
      margin-bottom: 8px;
    }

    .des {
      font-size: 16px;
      line-height: 24px;
      color: #8F94A1;
    }

    @mixin condition {
      background: #FFFFFF;
      border-radius: 8px;
      display: flex;
      flex-direction: row;
      padding: 24px;

      .icon {
        width: 64px;
        height: 64px;
      }

      .text {
        margin-left: 20px;

        span {
          display: block;
          line-height: 32px;
        }

        a {
          font-weight: 600;
          color: #55BC8A;
        }
      }
    }

    .condition {
      @include condition()
    }

    .m-condition{
      display: none;
    }

    .apply {
      @include condition();
      margin: 20px 0px;
    }

    .m-apply {
      display: none;
    }
  }
}

@media only screen and (max-width: $mobile-max-width) {
  @mixin condition {
    background: #FFFFFF;
    border-radius: 10px;
    padding: 20px;

    .top{
      display: flex;

      .icon {
        width: 28px;
        height: 28px;
        margin-right: 12px;
      }
    }

    .des{
      display: block;
      font-size: 16px;
      line-height: 24px;
      color: #8F94A1;

      li{
        padding-left: 21px;
        text-indent: -12px;
        text-align: justify;
      }

      span {
        display: block;
        line-height: 32px;
      }

      a {
        font-weight: 600;
        color: #55BC8A;
      }
    }
  }

  .applyNew{
    .apply{
      padding-top: 64px;
      padding-bottom: 44px;
      flex-direction: column;

      .text-head{
        flex-direction: column;

        .left{
          width: 100%;

          .title{
            font-size: 24px;
            line-height: 28px;
            margin-bottom: 16px;
          }

          .des{
            color: #919AA3;
          }

          .svg{
            display: none;
          }
        }

        .right{
          width: 333px;
          height: 255px;
          margin-left: 0px;
          margin: 0 auto;
          margin-top: 24px;
          background-image: url(/images/user-group/list/applyNew/m-apply.svg);
        }
      }

      .condition{
        display: none;
      }

      .m-condition{
        display: block;
        @include condition()
      }

      .apply{
        display: none;
      }

      .m-apply{
        display: block;
        @include condition();

        &:nth-of-type(odd){
          margin: 20px 0px;
        }
      }
    }
  }
}

.returns {
  margin-bottom: 78px;

  .return {
    .title {
      font-weight: 600;
      font-size: 32px;
      line-height: 48px;
      color: #3D3E49;
      text-shadow: 0px 4px 8px rgba(35, 45, 65, 0.1);
      text-align: center;
      margin-bottom: 40px;
    }

    .cards {
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      .card {
        box-sizing: border-box;
        width: 275px;
        height: 156px;
        background: #FFFFFF;
        border-radius: 8px;
        padding: 24px;
        position: relative;
        overflow: hidden;

        .text {
          font-size: 16px;
          line-height: 28px;
          color: #36435C;
        }

        .bg {
          position: absolute;
          top: 92px;
          right: 0px;
        }
      }
    }
  }
}

@media only screen and (max-width: $mobile-max-width) {
  .returns{
    margin-bottom: 14px;

    .return{
      .title{
        font-size: 24px;
        line-height: 28px;
        margin-bottom: 32px;
      }

      .cards{
        flex-direction: column;

        .card{
          width: 100%;
          height: 146px;
          margin-bottom: 20px;

          &:last-child{
            margin-bottom: 0px;
          }
        }
      }
    }
  }
}

.flex-end {
  transform: translateX(-232px);
  justify-content: flex-end !important;
}

.flex-start {
  transform: translateX(0px);
  justify-content: flex-start !important;
}